<template>
  <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
    <textarea :id="tinymceId" class="tinymce-textarea" />
    <div class="editor-custom-btn-container">
      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
    </div>
  </div>
</template>

<script>
/**
 * docs:
 * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
 */
import editorImage from './components/EditorImage'
import plugins from './plugins'
import toolbar from './toolbar'
import load from './dynamicLoadScript'
// import './langs/zh_CN'

// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
// const tinymceCDN = 'https://cdn.bootcdn.net/ajax/libs/tinymce/4.9.3/tinymce.min.js'

export default {
  name: 'Tinymce',
  components: { editorImage },
  props: {
    id: {
      type: String,
      default: function() {
        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    value: {
      type: String,
      default: ''
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    menubar: {
      type: String,
      default: 'file edit insert view format table'
    },
    height: {
      type: [Number, String],
      required: false,
      default: 360
    },
    width: {
      type: [Number, String],
      required: false,
      default: 'auto'
    }
  },
  data() {
    return {
      hasChange: false,
      hasInit: false,
      tinymceId: this.id,
      fullscreen: false,
      languageTypeList: {
        'en': 'en',
        'zh': 'zh_CN',
        'es': 'es_MX',
        'ja': 'ja'
      }
    }
  },
  computed: {
    containerWidth() {
      const width = this.width
      if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
        return `${width}px`
      }
      return width
    }
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val || ''))
      }
    }
  },
  mounted() {
    this.init()
  },
  activated() {
    if (window.tinymce) {
      this.initTinymce()
    }
  },
  deactivated() {
    this.destroyTinymce()
  },
  destroyed() {
    this.destroyTinymce()
  },
  methods: {
    init() {
      // dynamic load tinymce from cdn
      load(tinymceCDN, (err) => {
        if (err) {
          this.$message.error(err.message)
          return
        }
        this.initTinymce()
      })
    },
    initTinymce() {
      const _this = this
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        // language_url: '@/components/Tinymce/langs/zh_CN.js',
        // language: this.languageTypeList['zh'],
        // language: this.languageTypeList['en'],
        height: this.height,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
          }
          _this.hasInit = true
          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.hasChange = true
            this.$emit('input', editor.getContent())
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            _this.fullscreen = e.state
          })
        },
        // it will try to keep these URLs intact
        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
        convert_urls: false
        // 整合七牛上传
        // images_dataimg_filter(img) {
        //   setTimeout(() => {
        //     const $image = $(img);
        //     $image.removeAttr('width');
        //     $image.removeAttr('height');
        //     if ($image[0].height && $image[0].width) {
        //       $image.attr('data-wscntype', 'image');
        //       $image.attr('data-wscnh', $image[0].height);
        //       $image.attr('data-wscnw', $image[0].width);
        //       $image.addClass('wscnph');
        //     }
        //   }, 0);
        //   return img
        // },
        // images_upload_handler(blobInfo, success, failure, progress) {
        //   progress(0);
        //   const token = _this.$store.getters.token;
        //   getToken(token).then(response => {
        //     const url = response.data.qiniu_url;
        //     const formData = new FormData();
        //     formData.append('token', response.data.qiniu_token);
        //     formData.append('key', response.data.qiniu_key);
        //     formData.append('file', blobInfo.blob(), url);
        //     upload(formData).then(() => {
        //       success(url);
        //       progress(100);
        //     })
        //   }).catch(err => {
        //     failure('出现未知问题，刷新页面，或者联系程序员')
        //     console.log(err);
        //   });
        // },
      })

      window.tinymce.addI18n('zh_CN', {
        'Redo': '\u91cd\u505a',
        'Undo': '\u64a4\u9500',
        'Cut': '\u526a\u5207',
        'Copy': '\u590d\u5236',
        'Paste': '\u7c98\u8d34',
        'Select all': '\u5168\u9009',
        'New document': '\u65b0\u6587\u4ef6',
        'Ok': '\u786e\u5b9a',
        'Cancel': '\u53d6\u6d88',
        'Visual aids': '\u7f51\u683c\u7ebf',
        'Bold': '\u7c97\u4f53',
        'Italic': '\u659c\u4f53',
        'Underline': '\u4e0b\u5212\u7ebf',
        'Strikethrough': '\u5220\u9664\u7ebf',
        'Superscript': '\u4e0a\u6807',
        'Subscript': '\u4e0b\u6807',
        'Clear formatting': '\u6e05\u9664\u683c\u5f0f',
        'Align left': '\u5de6\u8fb9\u5bf9\u9f50',
        'Align center': '\u4e2d\u95f4\u5bf9\u9f50',
        'Align right': '\u53f3\u8fb9\u5bf9\u9f50',
        'Justify': '\u4e24\u7aef\u5bf9\u9f50',
        'Bullet list': '\u9879\u76ee\u7b26\u53f7',
        'Numbered list': '\u7f16\u53f7\u5217\u8868',
        'Decrease indent': '\u51cf\u5c11\u7f29\u8fdb',
        'Increase indent': '\u589e\u52a0\u7f29\u8fdb',
        'Close': '\u5173\u95ed',
        'Formats': '\u683c\u5f0f',
        'Your browser does not support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.': '\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002',
        'Headers': '\u6807\u9898',
        'Header 1': '\u6807\u98981',
        'Header 2': '\u6807\u98982',
        'Header 3': '\u6807\u98983',
        'Header 4': '\u6807\u98984',
        'Header 5': '\u6807\u98985',
        'Header 6': '\u6807\u98986',
        'Headings': '\u6807\u9898',
        'Heading 1': '\u6807\u98981',
        'Heading 2': '\u6807\u98982',
        'Heading 3': '\u6807\u98983',
        'Heading 4': '\u6807\u98984',
        'Heading 5': '\u6807\u98985',
        'Heading 6': '\u6807\u98986',
        'Preformatted': '\u9884\u5148\u683c\u5f0f\u5316\u7684',
        'Div': 'Div',
        'Pre': 'Pre',
        'Code': '\u4ee3\u7801',
        'Paragraph': '\u6bb5\u843d',
        'Blockquote': '\u5f15\u6587\u533a\u5757',
        'Inline': '\u6587\u672c',
        'Blocks': '\u57fa\u5757',
        'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.': '\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002',
        'Fonts': '\u5b57\u4f53',
        'Font Sizes': '\u5b57\u53f7',
        'Class': '\u7c7b\u578b',
        'Browse for an image': '\u6d4f\u89c8\u56fe\u50cf',
        'OR': '\u6216',
        'Drop an image here': '\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64',
        'Upload': '\u4e0a\u4f20',
        'Block': '\u5757',
        'Align': '\u5bf9\u9f50',
        'Default': '\u9ed8\u8ba4',
        'Circle': '\u7a7a\u5fc3\u5706',
        'Disc': '\u5b9e\u5fc3\u5706',
        'Square': '\u65b9\u5757',
        'Lower Alpha': '\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd',
        'Lower Greek': '\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd',
        'Lower Roman': '\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd',
        'Upper Alpha': '\u5927\u5199\u82f1\u6587\u5b57\u6bcd',
        'Upper Roman': '\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd',
        'Anchor...': '\u951a\u70b9...',
        'Name': '\u540d\u79f0',
        'Id': '\u6807\u8bc6\u7b26',
        'Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.': '\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002',
        'You have unsaved changes are you sure you want to navigate away?': '\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f',
        'Restore last draft': '\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f',
        'Special character...': '\u7279\u6b8a\u5b57\u7b26...',
        'Source code': '\u6e90\u4ee3\u7801',
        'Insert\/Edit code sample': '\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b',
        'Language': '\u8bed\u8a00',
        'Code sample...': '\u793a\u4f8b\u4ee3\u7801...',
        'Color Picker': '\u9009\u8272\u5668',
        'R': 'R',
        'G': 'G',
        'B': 'B',
        'Left to right': '\u4ece\u5de6\u5230\u53f3',
        'Right to left': '\u4ece\u53f3\u5230\u5de6',
        'Emoticons': '\u8868\u60c5',
        'Emoticons...': '\u8868\u60c5\u7b26\u53f7...',
        'Metadata and Document Properties': '\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027',
        'Title': '\u6807\u9898',
        'Keywords': '\u5173\u952e\u8bcd',
        'Description': '\u63cf\u8ff0',
        'Robots': '\u673a\u5668\u4eba',
        'Author': '\u4f5c\u8005',
        'Encoding': '\u7f16\u7801',
        'Fullscreen': '\u5168\u5c4f',
        'Action': '\u64cd\u4f5c',
        'Shortcut': '\u5feb\u6377\u952e',
        'Help': '\u5e2e\u52a9',
        'Address': '\u5730\u5740',
        'Focus to menubar': '\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f',
        'Focus to toolbar': '\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f',
        'Focus to element path': '\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84',
        'Focus to contextual toolbar': '\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355',
        'Insert link (if link plugin activated)': '\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)',
        'Save (if save plugin activated)': '\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)',
        'Find (if searchreplace plugin activated)': '\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)',
        'Plugins installed ({0}):': '\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):',
        'Premium plugins:': '\u4f18\u79c0\u63d2\u4ef6\uff1a',
        'Learn more...': '\u4e86\u89e3\u66f4\u591a...',
        'You are using {0}': '\u4f60\u6b63\u5728\u4f7f\u7528 {0}',
        'Plugins': '\u63d2\u4ef6',
        'Handy Shortcuts': '\u5feb\u6377\u952e',
        'Horizontal line': '\u6c34\u5e73\u5206\u5272\u7ebf',
        'Insert\/edit image': '\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247',
        'Alternative description': '\u66ff\u4ee3\u63cf\u8ff0',
        'Accessibility': '\u8f85\u52a9\u529f\u80fd',
        'Image is decorative': '\u56fe\u50cf\u662f\u88c5\u9970\u6027\u7684',
        'Source': '\u5730\u5740',
        'Dimensions': '\u5927\u5c0f',
        'Constrain proportions': '\u4fdd\u6301\u7eb5\u6a2a\u6bd4',
        'General': '\u666e\u901a',
        'Advanced': '\u9ad8\u7ea7',
        'Style': '\u6837\u5f0f',
        'Vertical space': '\u5782\u76f4\u8fb9\u8ddd',
        'Horizontal space': '\u6c34\u5e73\u8fb9\u8ddd',
        'Border': '\u8fb9\u6846',
        'Insert image': '\u63d2\u5165\u56fe\u7247',
        'Image...': '\u56fe\u7247...',
        'Image list': '\u56fe\u7247\u5217\u8868',
        'Rotate counterclockwise': '\u9006\u65f6\u9488\u65cb\u8f6c',
        'Rotate clockwise': '\u987a\u65f6\u9488\u65cb\u8f6c',
        'Flip vertically': '\u5782\u76f4\u7ffb\u8f6c',
        'Flip horizontally': '\u6c34\u5e73\u7ffb\u8f6c',
        'Edit image': '\u7f16\u8f91\u56fe\u7247',
        'Image options': '\u56fe\u7247\u9009\u9879',
        'Zoom in': '\u653e\u5927',
        'Zoom out': '\u7f29\u5c0f',
        'Crop': '\u88c1\u526a',
        'Resize': '\u8c03\u6574\u5927\u5c0f',
        'Orientation': '\u65b9\u5411',
        'Brightness': '\u4eae\u5ea6',
        'Sharpen': '\u9510\u5316',
        'Contrast': '\u5bf9\u6bd4\u5ea6',
        'Color levels': '\u989c\u8272\u5c42\u6b21',
        'Gamma': '\u4f3d\u9a6c\u503c',
        'Invert': '\u53cd\u8f6c',
        'Apply': '\u5e94\u7528',
        'Back': '\u540e\u9000',
        'Insert date\/time': '\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4',
        'Date\/time': '\u65e5\u671f\/\u65f6\u95f4',
        'Insert\/edit link': '\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5',
        'Text to display': '\u663e\u793a\u6587\u5b57',
        'Url': '\u5730\u5740',
        'Open link in...': '\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...',
        'Current window': '\u5f53\u524d\u7a97\u53e3',
        'None': '\u65e0',
        'New window': '\u5728\u65b0\u7a97\u53e3\u6253\u5f00',
        'Open link': '\u6253\u5f00\u94fe\u63a5',
        'Remove link': '\u5220\u9664\u94fe\u63a5',
        'Anchors': '\u951a\u70b9',
        'Link...': '\u94fe\u63a5...',
        'Paste or type a link': '\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5',
        'The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?': '\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f',
        'The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?': '\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f',
        'The URL you entered seems to be an external link. Do you want to add the required https:\/\/ prefix?': '\u60a8\u8f93\u5165\u7684 URL \u4f3c\u4e4e\u662f\u4e00\u4e2a\u5916\u90e8\u94fe\u63a5\u3002\u60a8\u60f3\u6dfb\u52a0\u6240\u9700\u7684 https:\/\/ \u524d\u7f00\u5417\uff1f',
        'Link list': '\u94fe\u63a5\u5217\u8868',
        'Insert video': '\u63d2\u5165\u89c6\u9891',
        'Insert\/edit video': '\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891',
        'Insert\/edit media': '\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53',
        'Alternative source': '\u955c\u50cf',
        'Alternative source URL': '\u66ff\u4ee3\u6765\u6e90\u7f51\u5740',
        'Media poster (Image URL)': '\u5c01\u9762(\u56fe\u7247\u5730\u5740)',
        'Paste your embed code below:': '\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:',
        'Embed': '\u5185\u5d4c',
        'Media...': '\u591a\u5a92\u4f53...',
        'Nonbreaking space': '\u4e0d\u95f4\u65ad\u7a7a\u683c',
        'Page break': '\u5206\u9875\u7b26',
        'Paste as text': '\u7c98\u8d34\u4e3a\u6587\u672c',
        'Preview': '\u9884\u89c8',
        'Print...': '\u6253\u5370...',
        'Save': '\u4fdd\u5b58',
        'Find': '\u67e5\u627e',
        'Replace with': '\u66ff\u6362\u4e3a',
        'Replace': '\u66ff\u6362',
        'Replace all': '\u5168\u90e8\u66ff\u6362',
        'Previous': '\u4e0a\u4e00\u4e2a',
        'Next': '\u4e0b\u4e00\u4e2a',
        'Find and Replace': '\u67e5\u627e\u548c\u66ff\u6362',
        'Find and replace...': '\u67e5\u627e\u5e76\u66ff\u6362...',
        'Could not find the specified string.': '\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.',
        'Match case': '\u533a\u5206\u5927\u5c0f\u5199',
        'Find whole words only': '\u5168\u5b57\u5339\u914d',
        'Find in selection': '\u5728\u9009\u533a\u4e2d\u67e5\u627e',
        'Spellcheck': '\u62fc\u5199\u68c0\u67e5',
        'Spellcheck Language': '\u62fc\u5199\u68c0\u67e5\u8bed\u8a00',
        'No misspellings found.': '\u6ca1\u6709\u53d1\u73b0\u62fc\u5199\u9519\u8bef',
        'Ignore': '\u5ffd\u7565',
        'Ignore all': '\u5168\u90e8\u5ffd\u7565',
        'Finish': '\u5b8c\u6210',
        'Add to Dictionary': '\u6dfb\u52a0\u5230\u5b57\u5178',
        'Insert table': '\u63d2\u5165\u8868\u683c',
        'Table properties': '\u8868\u683c\u5c5e\u6027',
        'Delete table': '\u5220\u9664\u8868\u683c',
        'Cell': '\u5355\u5143\u683c',
        'Row': '\u884c',
        'Column': '\u5217',
        'Cell properties': '\u5355\u5143\u683c\u5c5e\u6027',
        'Merge cells': '\u5408\u5e76\u5355\u5143\u683c',
        'Split cell': '\u62c6\u5206\u5355\u5143\u683c',
        'Insert row before': '\u5728\u4e0a\u65b9\u63d2\u5165',
        'Insert row after': '\u5728\u4e0b\u65b9\u63d2\u5165',
        'Delete row': '\u5220\u9664\u884c',
        'Row properties': '\u884c\u5c5e\u6027',
        'Cut row': '\u526a\u5207\u884c',
        'Copy row': '\u590d\u5236\u884c',
        'Paste row before': '\u7c98\u8d34\u5230\u4e0a\u65b9',
        'Paste row after': '\u7c98\u8d34\u5230\u4e0b\u65b9',
        'Insert column before': '\u5728\u5de6\u4fa7\u63d2\u5165',
        'Insert column after': '\u5728\u53f3\u4fa7\u63d2\u5165',
        'Delete column': '\u5220\u9664\u5217',
        'Cols': '\u5217',
        'Rows': '\u884c',
        'Width': '\u5bbd',
        'Height': '\u9ad8',
        'Cell spacing': '\u5355\u5143\u683c\u5916\u95f4\u8ddd',
        'Cell padding': '\u5355\u5143\u683c\u5185\u8fb9\u8ddd',
        'Caption': '\u6807\u9898',
        'Show caption': '\u663e\u793a\u6807\u9898',
        'Left': '\u5de6\u5bf9\u9f50',
        'Center': '\u5c45\u4e2d',
        'Right': '\u53f3\u5bf9\u9f50',
        'Cell type': '\u5355\u5143\u683c\u7c7b\u578b',
        'Scope': '\u8303\u56f4',
        'Alignment': '\u5bf9\u9f50\u65b9\u5f0f',
        'H Align': '\u6c34\u5e73\u5bf9\u9f50',
        'V Align': '\u5782\u76f4\u5bf9\u9f50',
        'Top': '\u9876\u90e8\u5bf9\u9f50',
        'Middle': '\u5782\u76f4\u5c45\u4e2d',
        'Bottom': '\u5e95\u90e8\u5bf9\u9f50',
        'Header cell': '\u8868\u5934\u5355\u5143\u683c',
        'Row group': '\u884c\u7ec4',
        'Column group': '\u5217\u7ec4',
        'Row type': '\u884c\u7c7b\u578b',
        'Header': '\u8868\u5934',
        'Body': '\u8868\u4f53',
        'Footer': '\u8868\u5c3e',
        'Border color': '\u8fb9\u6846\u989c\u8272',
        'Insert template...': '\u63d2\u5165\u6a21\u677f...',
        'Templates': '\u6a21\u677f',
        'Template': '\u6a21\u677f',
        'Text color': '\u6587\u5b57\u989c\u8272',
        'Background color': '\u80cc\u666f\u8272',
        'Custom...': '\u81ea\u5b9a\u4e49...',
        'Custom color': '\u81ea\u5b9a\u4e49\u989c\u8272',
        'No color': '\u65e0',
        'Remove color': '\u79fb\u9664\u989c\u8272',
        'Table of Contents': '\u5185\u5bb9\u5217\u8868',
        'Show blocks': '\u663e\u793a\u533a\u5757\u8fb9\u6846',
        'Show invisible characters': '\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26',
        'Word count': '\u5b57\u6570',
        'Count': '\u8ba1\u6570',
        'Document': '\u6587\u6863',
        'Selection': '\u9009\u62e9',
        'Words': '\u5355\u8bcd',
        'Words: {0}': '\u5b57\u6570\uff1a{0}',
        '{0} words': '{0} \u5b57',
        'File': '\u6587\u4ef6',
        'Edit': '\u7f16\u8f91',
        'Insert': '\u63d2\u5165',
        'View': '\u89c6\u56fe',
        'Format': '\u683c\u5f0f',
        'Table': '\u8868\u683c',
        'Tools': '\u5de5\u5177',
        'Powered by {0}': '\u7531{0}\u9a71\u52a8',
        'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help': '\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9',
        'Image title': '\u56fe\u7247\u6807\u9898',
        'Border width': '\u8fb9\u6846\u5bbd\u5ea6',
        'Border style': '\u8fb9\u6846\u6837\u5f0f',
        'Error': '\u9519\u8bef',
        'Warn': '\u8b66\u544a',
        'Valid': '\u6709\u6548',
        'To open the popup, press Shift+Enter': '\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846',
        'Rich Text Area. Press ALT-0 for help.': '\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002',
        'System Font': '\u7cfb\u7edf\u5b57\u4f53',
        'Failed to upload image: {0}': '\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}',
        'Failed to load plugin: {0} from url {1}': '\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}',
        'Failed to load plugin url: {0}': '\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}',
        'Failed to initialize plugin: {0}': '\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}',
        'example': '\u793a\u4f8b',
        'Search': '\u641c\u7d22',
        'All': '\u5168\u90e8',
        'Currency': '\u8d27\u5e01',
        'Text': '\u6587\u5b57',
        'Quotations': '\u5f15\u7528',
        'Mathematical': '\u6570\u5b66',
        'Extended Latin': '\u62c9\u4e01\u8bed\u6269\u5145',
        'Symbols': '\u7b26\u53f7',
        'Arrows': '\u7bad\u5934',
        'User Defined': '\u81ea\u5b9a\u4e49',
        'dollar sign': '\u7f8e\u5143\u7b26\u53f7',
        'currency sign': '\u8d27\u5e01\u7b26\u53f7',
        'euro-currency sign': '\u6b27\u5143\u7b26\u53f7',
        'colon sign': '\u5192\u53f7',
        'cruzeiro sign': '\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7',
        'french franc sign': '\u6cd5\u90ce\u7b26\u53f7',
        'lira sign': '\u91cc\u62c9\u7b26\u53f7',
        'mill sign': '\u5bc6\u5c14\u7b26\u53f7',
        'naira sign': '\u5948\u62c9\u7b26\u53f7',
        'peseta sign': '\u6bd4\u585e\u5854\u7b26\u53f7',
        'rupee sign': '\u5362\u6bd4\u7b26\u53f7',
        'won sign': '\u97e9\u5143\u7b26\u53f7',
        'new sheqel sign': '\u65b0\u8c22\u514b\u5c14\u7b26\u53f7',
        'dong sign': '\u8d8a\u5357\u76fe\u7b26\u53f7',
        'kip sign': '\u8001\u631d\u57fa\u666e\u7b26\u53f7',
        'tugrik sign': '\u56fe\u683c\u91cc\u514b\u7b26\u53f7',
        'drachma sign': '\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7',
        'german penny symbol': '\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7',
        'peso sign': '\u6bd4\u7d22\u7b26\u53f7',
        'guarani sign': '\u74dc\u62c9\u5c3c\u7b26\u53f7',
        'austral sign': '\u6fb3\u5143\u7b26\u53f7',
        'hryvnia sign': '\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7',
        'cedi sign': '\u585e\u5730\u7b26\u53f7',
        'livre tournois sign': '\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7',
        'spesmilo sign': 'spesmilo\u7b26\u53f7',
        'tenge sign': '\u575a\u6208\u7b26\u53f7',
        'indian rupee sign': '\u5370\u5ea6\u5362\u6bd4',
        'turkish lira sign': '\u571f\u8033\u5176\u91cc\u62c9',
        'nordic mark sign': '\u5317\u6b27\u9a6c\u514b',
        'manat sign': '\u9a6c\u7eb3\u7279\u7b26\u53f7',
        'ruble sign': '\u5362\u5e03\u7b26\u53f7',
        'yen character': '\u65e5\u5143\u5b57\u6837',
        'yuan character': '\u4eba\u6c11\u5e01\u5143\u5b57\u6837',
        'yuan character, in hong kong and taiwan': '\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09',
        'yen\/yuan character variant one': '\u5143\u5b57\u6837\uff08\u5927\u5199\uff09',
        'Loading emoticons...': '\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...',
        'Could not load emoticons': '\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7',
        'People': '\u4eba\u7c7b',
        'Animals and Nature': '\u52a8\u7269\u548c\u81ea\u7136',
        'Food and Drink': '\u98df\u7269\u548c\u996e\u54c1',
        'Activity': '\u6d3b\u52a8',
        'Travel and Places': '\u65c5\u6e38\u548c\u5730\u70b9',
        'Objects': '\u7269\u4ef6',
        'Flags': '\u65d7\u5e1c',
        'Characters': '\u5b57\u7b26',
        'Characters (no spaces)': '\u5b57\u7b26(\u65e0\u7a7a\u683c)',
        '{0} characters': '{0} \u4e2a\u5b57\u7b26',
        'Error: Form submit field collision.': '\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002',
        'Error: No form element found.': '\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002',
        'Update': '\u66f4\u65b0',
        'Color swatch': '\u989c\u8272\u6837\u672c',
        'Turquoise': '\u9752\u7eff\u8272',
        'Green': '\u7eff\u8272',
        'Blue': '\u84dd\u8272',
        'Purple': '\u7d2b\u8272',
        'Navy Blue': '\u6d77\u519b\u84dd',
        'Dark Turquoise': '\u6df1\u84dd\u7eff\u8272',
        'Dark Green': '\u6df1\u7eff\u8272',
        'Medium Blue': '\u4e2d\u84dd\u8272',
        'Medium Purple': '\u4e2d\u7d2b\u8272',
        'Midnight Blue': '\u6df1\u84dd\u8272',
        'Yellow': '\u9ec4\u8272',
        'Orange': '\u6a59\u8272',
        'Red': '\u7ea2\u8272',
        'Light Gray': '\u6d45\u7070\u8272',
        'Gray': '\u7070\u8272',
        'Dark Yellow': '\u6697\u9ec4\u8272',
        'Dark Orange': '\u6df1\u6a59\u8272',
        'Dark Red': '\u6df1\u7ea2\u8272',
        'Medium Gray': '\u4e2d\u7070\u8272',
        'Dark Gray': '\u6df1\u7070\u8272',
        'Light Green': '\u6d45\u7eff\u8272',
        'Light Yellow': '\u6d45\u9ec4\u8272',
        'Light Red': '\u6d45\u7ea2\u8272',
        'Light Purple': '\u6d45\u7d2b\u8272',
        'Light Blue': '\u6d45\u84dd\u8272',
        'Dark Purple': '\u6df1\u7d2b\u8272',
        'Dark Blue': '\u6df1\u84dd\u8272',
        'Black': '\u9ed1\u8272',
        'White': '\u767d\u8272',
        'Switch to or from fullscreen mode': '\u5207\u6362\u5168\u5c4f\u6a21\u5f0f',
        'Open help dialog': '\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846',
        'history': '\u5386\u53f2',
        'styles': '\u6837\u5f0f',
        'formatting': '\u683c\u5f0f\u5316',
        'alignment': '\u5bf9\u9f50',
        'indentation': '\u7f29\u8fdb',
        'Font': '\u5b57\u4f53',
        'Size': '\u5b57\u53f7',
        'More...': '\u66f4\u591a...',
        'Select...': '\u9009\u62e9...',
        'Preferences': '\u9996\u9009\u9879',
        'Yes': '\u662f',
        'No': '\u5426',
        'Keyboard Navigation': '\u952e\u76d8\u6307\u5f15',
        'Version': '\u7248\u672c',
        'Code view': '\u4ee3\u7801\u89c6\u56fe',
        'Open popup menu for split buttons': '\u6253\u5f00\u5f39\u51fa\u5f0f\u83dc\u5355\uff0c\u7528\u4e8e\u62c6\u5206\u6309\u94ae',
        'List Properties': '\u5217\u8868\u5c5e\u6027',
        'List properties...': '\u6807\u9898\u5b57\u4f53\u5c5e\u6027',
        'Start list at number': '\u4ee5\u6570\u5b57\u5f00\u59cb\u5217\u8868',
        'Line height': '\u884c\u9ad8',
        'comments': '\u5907\u6ce8',
        'Format Painter': '\u683c\u5f0f\u5237',
        'Insert\/edit iframe': '\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6',
        'Capitalization': '\u5927\u5199',
        'lowercase': '\u5c0f\u5199',
        'UPPERCASE': '\u5927\u5199',
        'Title Case': '\u9996\u5b57\u6bcd\u5927\u5199',
        'permanent pen': '\u8bb0\u53f7\u7b14',
        'Permanent Pen Properties': '\u6c38\u4e45\u7b14\u5c5e\u6027',
        'Permanent pen properties...': '\u6c38\u4e45\u7b14\u5c5e\u6027...',
        'case change': '\u6848\u4f8b\u66f4\u6539',
        'page embed': '\u9875\u9762\u5d4c\u5165',
        'Advanced sort...': '\u9ad8\u7ea7\u6392\u5e8f...',
        'Advanced Sort': '\u9ad8\u7ea7\u6392\u5e8f',
        'Sort table by column ascending': '\u6309\u5217\u5347\u5e8f\u8868',
        'Sort table by column descending': '\u6309\u5217\u964d\u5e8f\u8868',
        'Sort': '\u6392\u5e8f',
        'Order': '\u6392\u5e8f',
        'Sort by': '\u6392\u5e8f\u65b9\u5f0f',
        'Ascending': '\u5347\u5e8f',
        'Descending': '\u964d\u5e8f',
        'Column {0}': '\u5217{0}',
        'Row {0}': '\u884c{0}',
        'Spellcheck...': '\u62fc\u5199\u68c0\u67e5...',
        'Misspelled word': '\u62fc\u5199\u9519\u8bef\u7684\u5355\u8bcd',
        'Suggestions': '\u5efa\u8bae',
        'Change': '\u66f4\u6539',
        'Finding word suggestions': '\u67e5\u627e\u5355\u8bcd\u5efa\u8bae',
        'Success': '\u6210\u529f',
        'Repair': '\u4fee\u590d',
        'Issue {0} of {1}': '\u5171\u8ba1{1}\u95ee\u9898{0}',
        'Images must be marked as decorative or have an alternative text description': '\u56fe\u50cf\u5fc5\u987b\u6807\u8bb0\u4e3a\u88c5\u9970\u6027\u6216\u5177\u6709\u66ff\u4ee3\u6587\u672c\u63cf\u8ff0',
        'Images must have an alternative text description. Decorative images are not allowed.': '\u56fe\u50cf\u5fc5\u987b\u5177\u6709\u66ff\u4ee3\u6587\u672c\u63cf\u8ff0\u3002\u4e0d\u5141\u8bb8\u4f7f\u7528\u88c5\u9970\u56fe\u50cf\u3002',
        'Or provide alternative text:': '\u6216\u63d0\u4f9b\u5907\u9009\u6587\u672c\uff1a',
        'Make image decorative:': '\u4f7f\u56fe\u50cf\u88c5\u9970\uff1a',
        'ID attribute must be unique': 'ID \u5c5e\u6027\u5fc5\u987b\u662f\u552f\u4e00\u7684',
        'Make ID unique': '\u4f7f ID \u72ec\u4e00\u65e0\u4e8c',
        'Keep this ID and remove all others': '\u4fdd\u7559\u6b64 ID \u5e76\u5220\u9664\u6240\u6709\u5176\u4ed6',
        'Remove this ID': '\u5220\u9664\u6b64 ID',
        'Remove all IDs': '\u6e05\u9664\u5168\u90e8IDs',
        'Checklist': '\u6e05\u5355',
        'Anchor': '\u951a\u70b9',
        'Special character': '\u7279\u6b8a\u7b26\u53f7',
        'Code sample': '\u4ee3\u7801\u793a\u4f8b',
        'Color': '\u989c\u8272',
        'Document properties': '\u6587\u6863\u5c5e\u6027',
        'Image description': '\u56fe\u7247\u63cf\u8ff0',
        'Image': '\u56fe\u7247',
        'Insert link': '\u63d2\u5165\u94fe\u63a5',
        'Target': '\u6253\u5f00\u65b9\u5f0f',
        'Link': '\u94fe\u63a5',
        'Poster': '\u5c01\u9762',
        'Media': '\u5a92\u4f53',
        'Print': '\u6253\u5370',
        'Prev': '\u4e0a\u4e00\u4e2a',
        'Find and replace': '\u67e5\u627e\u548c\u66ff\u6362',
        'Whole words': '\u5168\u5b57\u5339\u914d',
        'Insert template': '\u63d2\u5165\u6a21\u677f'
      })
    },
    destroyTinymce() {
      const tinymce = window.tinymce.get(this.tinymceId)
      if (this.fullscreen) {
        tinymce.execCommand('mceFullScreen')
      }

      if (tinymce) {
        tinymce.destroy()
      }
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value)
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent()
    },
    imageSuccessCBK(arr) {
      arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img class='wscnph' src='${v.url}' >`))
    }
  }
}
</script>

<style lang='scss' scoped>
.tinymce-container {
  position: relative;
  line-height: normal;
}

.tinymce-container {
  ::v-deep {
    .mce-fullscreen {
      z-index: 10000;
    }
  }
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  /*z-index: 2005;*/
}

.fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
}

.editor-upload-btn {
  display: inline-block;
}
</style>
